<template>
	<view class="relative">
		<view class="bgcolor">
			<view class="bg-[#fff] bg-opacity-[0.1] h-[972rpx]"></view>
		</view>
		<up-navbar title=" " :safeAreaInsetTop="true" bgColor="transparent" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[transparent] rounded-[38rpx] bg-[#fff] bg-opacity-[.2]">
					<view class="pr-[24rpx] flex items-center" @click="leftClick">
						<image src="../../static/image/dian.png" class="w-[32rpx] h-[32rpx] block mr-[4rpx]"></image>
						<view class="w-[104rpx] truncate text-white font-[26rpx]">{{ appStore.name }}</view>
						<image src="../../static/image/right-w.png" class="w-[32rpx] h-[32rpx] block"></image>
					</view>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<image src="../../static/image/car.png" class="w-[32rpx] h-[32rpx] block" @click="rightClick"></image>
				</view>
			</template>
		</up-navbar>
		<view class="px-[20rpx]">
			<SearchBar @search="onSearch"></SearchBar>
		</view>
		<view class="px-[20rpx] py-[20rpx]">
			<up-swiper :list="list1" @change="change" @click="click" height="180"></up-swiper>
		</view>
		<view class="body relative">
			<view class="flex justify-between flex-wrap pb-[38rpx]">
				<view @click="checkItem(index)" class="w-[104rpx] mb-[30rpx] flex flex-col items-center" :class="index == 3 || index == 7 ? '' : 'mr-[84rpx]'"
					v-for="(item,index) in sortList" :key="index">
					<image :src="item.pic" mode="" class="w-[88rpx] h-[88rpx] block mb-[12rpx]">
					</image>
					<view class="text-[24rpx] ">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="px-[30rpx] mb-[30rpx] flex justify-between flex-wrap">
			<view class="flex justify-between mb-[24rpx]">
				<view class="mr-[22rpx]" >
					<image @click="gotolink('/community/communityList/communityList')" src="../../static/image/img1.png" mode="" class="w-[304rpx] h-[360rpx] block"/>
				</view>
				<view class="flex flex-col justify-between" >
					<image @click="gotolink('/community/ConstructionFund/ConstructionFund')" src="../../static/image/img2.png" mode="" class="w-[364rpx] h-[170rpx] block"/>
					<image @click="gotolink('/subPages/ColonelReport/ColonelReport')" src="../../static/image/img3.png" mode="" class="w-[364rpx] h-[170rpx] block"/>
				</view>
			</view>
			<view class="flex justify-between" >
				<image @click="gotolink('/subPages/FreeAdmission/FreeAdmission')" src="../../static/image/img4.png" mode="" class="mr-[24rpx] w-[302rpx] h-[170rpx] block"/>
				<image src="../../static/image/img5.png" mode="" class="w-[364rpx] h-[170rpx] block"/>
			</view>
		</view>
		<view class="flex justify-between items-end px-[30rpx] mb-[20rpx]">
			<view class="text-[40rpx] color-[#333333] font-normal">新品推荐</view>
			<view class="flex items-center">
				<view class="text-[24] text-[#46A7FD] font-normal">更多</view>
				<image src="../../static/image/right-b.png" mode="" class="w-[32rpx] h-[32rpx] block"></image>
			</view>
		</view>
		<view class="px-[30rpx] grid grid-cols-2 gap-[22rpx]">
			<template  v-for="(item,index) in proudctList" :key="index">
				<productItem :product="item" @change="onchange"></productItem>
			</template>
		</view>
		<CustomTabbar :currentIndex="0" />
	</view>
</template>

<script setup>
import {onLoad , onReachBottom , onShow } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import SearchBar from "@/components/SearchBar.vue";
import productItem from "@/components/productItem.vue"
import { indexMSG } from '../../API/user';
import env from '@/config/common.js'
import { GetGoodPage } from '../../API/product';
import { showToast } from '../../utils/utils';
	let baseUrl = ref(env.API_BASE_URL_DEV)
	let list1 = ref([])
	let total = reactive(0)
	let pageObj = ref({
		pageNum:1,
		pageSize:10,
		storeId:''
	})
	let proudctList = ref([])
	let sortList = ref([])
	let appStore = ref({})
	function rightClick(){
		uni.navigateTo({
			url:'/pageOrder/ShoppingCart/ShoppingCart'
		})
		console.log('rightClcik');
	}
	function leftClick(){
		uni.navigateTo({
			url:'/subPages/StoreAddress/StoreAddress'
		})
	}
	function onSearch(e){
		uni.navigateTo({
		    url:'/pageOrder/search/search?key=' + e
		})
	}
	function onchange(e){
		console.log('product',e);
		uni.navigateTo({
			url:'/subPages/productItem/productItem?id=' + e
		})
	}
	function gotolink(url){
		uni.navigateTo({
			url:url
		})
	}
	async function getProudctList(){
		pageObj.value.storeId = appStore.value.id
		let { rows,total } = await GetGoodPage(pageObj.value)
		total = total
		proudctList.value = rows
		// console.log('data',data);
	}
	async function getIndexInfo(){
		let { data } = await indexMSG()
		list1.value = data.brannList.map(item=>{
			item.url = baseUrl.value + item.pic
			return item
		})
		sortList.value = data.appGoodCategoryList.map(item=>{
		    item.pic = baseUrl.value + item.pic
			return item
		})
		appStore.value = data.appStore
		console.log('sortList',sortList.value);
	}
	const checkItem = (index)=>{
		uni.navigateTo({
			url:`/subPages/sort/sort?current=${index}&storeId=${pageObj.value.storeId}`
		})
	}
	onLoad(async ()=>{
	})
	onShow(async ()=>{
		await getIndexInfo()
		await getProudctList()
	})
	onReachBottom(async()=>{
	    if(proudctList.value.length < total){
			pageObj.value.pageNum++
			let { rows , total } = await GetGoodPage(pageObj.value)
			total = total
			proudctList.value = proudctList.value.concat(rows)
		}else{
			showToast('没有更多了')
		}
	})
</script>

<style lang="scss" scoped>
	.bgcolor {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 972rpx;
		background: linear-gradient(180deg, #EA9EFD 0%, #46A7FD 65%, rgba(184, 138, 253, 0) 100%);
	}

	.body {
		padding: 30rpx 40rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #FFFFFF 100%);
	}
</style>

